<template>
	<view class="repair-wrap">
		<view class="tab_nav" style="background-color: #FFFFFF;">
			<view class="navTitle" v-for="(item,index) in navList" :key="index">
				<view :class="{'active':isActive === item.index}" @click="checked(item.index)">
					{{item.title}}
				</view>
			</view>
		</view>
		<!-- 今日、本月、年度 (切换栏)-->
		<view class="repair-box u-p-40 u-p-l-30 u-p-r-30">
			<view style="display: flex;">
				<button class="button"
					:style="this.buttonClick ==1?'background: linear-gradient(180deg, #76D904 0%, #417505 100%);color:#ffffff;border:none':null"
					@click="handlerClickState(1)">今日</button>
				<button class="button"
					:style="this.buttonClick ==2?'background: linear-gradient(180deg, #76D904 0%, #417505 100%);color:#ffffff;border:none':null"
					@click="handlerClickState(2)">本月</button>
				<button class="button"
					:style="this.buttonClick ==3?'background: linear-gradient(180deg, #76D904 0%, #417505 100%);color:#ffffff;border:none':null"
					@click="handlerClickState(3)">本年度</button>
			</view>

		</view>
		<!-- 今日 -->
		<view v-if="buttonClick == 1" class="">
			<view class="repair-box u-p-l-30 u-p-r-30">
				<view class="header-form">
					<view class="header-li" style="justify-content: space-between;">
						<view class="header-name">
							<h4>选择时间：</h4>
						</view>
						<picker :value="indexe" @change="typeBtn" :range="typaBtne" range-key="name" mode="selector">
							<view class="form-select">{{typaBtne[indexe].name}}</view>
						</picker>
					</view>
				</view>
				<view style="text-align: center;font-weight: 600;font-size: 22px;padding: 10px;">
					<image src="https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage/xq.png" style="width: 20px;height: 20px;margin-right: 10px;vertical-align: -2px;"></image>
					{{ homelist.proName}}
				</view>
				<!-- 公告收益 -->
				<view @click="moneyShow = true" v-if="isActive == 1"
					style="text-align: center;font-size: 15px;color: #007aff;margin-top: 10px;border-bottom: 1px solid #ddd;">
					截止目前该小区公共收益
					<view style="color: #000;margin-top: 2px;padding-bottom: 28px;">
						余额 <span
							:style="propertyFee.profitInfo.totalBalance >0 ? 'color:#F9A832;font-size:20px;padding:0px 5px' : propertyFee.profitInfo.totalBalance < 0 ? 'color:red;font-size:20px' : ''">{{propertyFee.profitInfo.totalBalance|moneyFormat}}</span>
						元
					</view>
				</view>
				<!-- 代收代付 -->
				<view @click="moneyShowto = true" v-if="isActive == 2"
					style="text-align: center;font-size: 15px;color: #007aff;margin-top: 10px;border-bottom: 1px solid #ddd;">
					截止目前该小区代收代付
					<view style="color: #000;margin-top: 2px;padding-bottom: 7px;">
						余额 <span
							:style="propertyFee.withholdInfo.totalBalance >0 ? 'color:#F9A832;font-size:20px;padding:0 5px' : propertyFee.withholdInfo.totalBalance < 0 ? 'color:red;font-size:20px' : ''">{{propertyFee.withholdInfo.totalBalance|moneyFormat}}</span>
						元
					</view>
				</view>

				<view class="repair-box u-p-l-30 u-p-r-30">
					<!-- isActive == 0&&buttonClick==1&& -->
					<view style="text-align: center;color: #578EF0" v-if="propertyFee.finance == true">
						<view @click="getJump()">物业费缴费公示</view>
					</view>
					<view style="margin: 0 auto;display: flex; justify-content: space-between;margin-top: -16px;">
						<view class="u-m-t-20 u-p-40 u-p-r-30 finance-money">
							<text style="color: #999999;">已收金额</text>
							<view style="width: 100%;text-align: center;margin-top: 6px;">
								<text
									style="font-size: 20px;color: #F9A832;">{{propertyFee.received|moneyFormat}}元</text>
							</view>
						</view>
						<view class="u-m-t-20 u-p-40 u-p-r-30 finance-money">
							<text style="color: #999999;">支出金额</text>
							<view style="width: 100%;text-align: center;margin-top: 6px;">
								<text
									style="font-size: 20px;color: rgb(146 216 65);;">{{propertyFee.expended|moneyFormat}}元</text>
							</view>
						</view>
					</view>

				</view>

			</view>
			<view class="list_box" :style="detailData.length==0?'padding: 80rpx 0':''">
				<view class="bor_Noneone" style="padding-bottom:30px;background: #ffffff;" v-if="detailData.length==0">

					<image class="bor_Noneimage" src="https://clhy-img.oss-cn-beijing.aliyuncs.com/2023-04-07_image/9015d0e9f45344c4007d408cd271f6a.png"
						mode="scaleToFill">
					</image>
					<view style="color: #999999;text-align: center;padding-bottom:36px;margin-top: 30rpx;">
						今日{{isActive == 0 ? '物业费' : isActive ==1 ? '公共收益' : isActive == 2 ? '代收代付' :''}}无收入支出
					</view>
				</view>
				<view class="list" v-else v-for="(item,index) in detailData">
					<view class="list-cont">
						<view class="list-left">
							<image v-if="item.type == '支出'" src="https://clhy-img.oss-cn-beijing.aliyuncs.com/file/2023-03-09/634a10321e1c4ae8126aeccc04552e2.png" class="list-img">
							</image>
							<image v-else src="https://clhy-img.oss-cn-beijing.aliyuncs.com/file/2023-03-09/ecde5e1a227d3ed640f145af575ceac.png" class="list-img"></image>
							<view style="margin-left: 20rpx;">
								<view class="named">
									<view>
										{{item.type == '支出'?'支出':'收入'}}
									</view>
									<view style='margin-left:20rpx' v-if="item.book_subject==0">
										{{item.book_types[item.book_types.length-1]}}
									</view>
									<view style='margin-left:20rpx' v-else>{{item.types}}</view>
								</view>

								<!-- <view> -->
								<view class="title" style="margin-top: 6px;">
									{{item.book_in_time}}
								</view>

							</view>
						</view>
						<view class="list-right"
							style="display:flex; justify-content:end; align-items: center; width:30vw;">
							<view class="tel" style="color:#f9a832">
								<view style="font-size: 17px;">￥{{item.book_money }}
								</view>
							</view>
						</view>
					</view>
					<view style="background-color: #f4f4f4;height: 4px;"></view>
				</view>
			</view>
		</view>
		<!-- 本月 -->
		<view v-if="buttonClick == 2">
			<view class="repair-box u-p-l-30 u-p-r-30">
				<view class="header-form">
					<view class="header-li" style="justify-content: space-between;">
						<view class="header-name">
							<h4>选择时间：</h4>
						</view>
						<picker :value="indexeTow" @change="typeBtnTow" :range="typaBtneTow" range-key="name"
							mode="selector">
							<view class="form-select">{{typaBtneTow[indexeTow].name}}</view>
						</picker>
					</view>
				</view>
				<view style="text-align: center;font-weight: 600;font-size: 22px;padding-top: 10px;">
					<image src="https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage/xq.png" style="width: 20px;height: 20px;margin-right: 10px;vertical-align: -2px;"></image>
					{{homelist.proName}}
				</view>
				<!-- 公告收益 -->
				<view @click="moneyShow = true" v-if="isActive == 1"
					style="text-align: center;font-size: 15px;color: #007aff;margin-top: 10px;border-bottom: 1px solid #ddd;">
					截止目前该小区公共收益
					<view style="color: #000;margin-top: 2px;padding-bottom: 7px;">
						余额 <span
							:style="propertyFee.profitInfo.totalBalance >0 ? 'color:#F9A832;font-size:20px;padding:0px 5px' : propertyFee.profitInfo.totalBalance < 0 ? 'color:red;font-size:20px' : ''">{{propertyFee.profitInfo.totalBalance|moneyFormat}}</span>
						元
					</view>
				</view>
				<!-- 代收代付 -->
				<view @click="moneyShowto = true" v-if="isActive == 2"
					style="text-align: center;font-size: 15px;color: #007aff;margin-top: 10px;border-bottom: 1px solid #ddd;">
					截止目前该小区代收代付
					<view style="color: #000;margin-top: 2px;padding-bottom: 7px;">
						余额 <span
							:style="propertyFee.withholdInfo.totalBalance >0 ? 'color:#F9A832;font-size:20px;padding:0 5px' : propertyFee.withholdInfo.totalBalance < 0 ? 'color:red;font-size:20px' : ''">{{propertyFee.withholdInfo.totalBalance|moneyFormat}}</span>
						元
					</view>
				</view>
				<view style="margin: 0 auto;display: flex; justify-content: space-between;">
					<view class=" u-p-30 u-p-r-30 finance-money">
						<text style="color: #999999;">已收金额</text>
						<view style="width: 100%;text-align: center;margin-top: 6px;">
							<text style="font-size: 20px;color: #F9A832;">{{propertyFee.received | moneyFormat}}元</text>
						</view>
					</view>
					<view class="u-p-30 u-p-r-30 finance-money">
						<text style="color: #999999;">支出金额</text>
						<view style="width: 100%;text-align: center;margin-top: 6px;">
							<text
								style="font-size: 20px;color: rgb(146 216 65);;">{{propertyFee.expended | moneyFormat}}元</text>
						</view>
					</view>
				</view>

			</view>
			<view style="width: 100%;" v-if="!this.detailData.length > 0">
				<view class="bor_Noneone">
					<image class="bor_Noneimage" src="https://clhy-img.oss-cn-beijing.aliyuncs.com/2023-04-07_image/9015d0e9f45344c4007d408cd271f6a.png" mode="">
					</image>
					<view style="color: #999999;text-align: center;">
						{{this.indexeTow == 0 ? '上月' : this.indexeTow == 1 ? '本月' : ''}}{{isActive == 0 ? '物业费' : isActive ==1 ? '公共收益' : isActive == 2 ? '代收代付' :''}}无收入支出
					</view>
				</view>
			</view>
			<view style="margin-top: 10px;">
				<view v-for="(item,index) in detailData">
					<view class="day_month" v-if="index == 0 ">
						<span>上旬</span>
					</view>
					<view class="day_month" v-if="index == 2 ">
						<span>中旬</span>
					</view>
					<view class="day_month" v-if="index == 4 ">
						<span>下旬</span>
					</view>
					<view class="repair-box"
						:style="index == 1 || index == 3 ? 'display: flex;border-bottom: 1px solid #CCCCCC;margin-bottom:10px' : null">
						<view class="list">

							<view class="list-cont" @click="handleIncome(item,index)">
								<view class="list-left">
									<image v-if="item.type == '支出'" src="https://clhy-img.oss-cn-beijing.aliyuncs.com/file/2023-03-09/634a10321e1c4ae8126aeccc04552e2.png"
										class="list-img"></image>
									<image v-else src="https://clhy-img.oss-cn-beijing.aliyuncs.com/file/2023-03-09/ecde5e1a227d3ed640f145af575ceac.png" class="list-img"></image>
									<view style="margin-left: 20rpx;">
										<view class="named">
											<view v-if="index%2==0? '收入':'支出'">
												{{index%2==0? '收入':'支出'}}
											</view>
										</view>

										<view>
											<view class="title" style="margin-top: 6px;"
												v-if="index == 0 || index == 1">1日至10日
											</view>
											<view class="title" style="margin-top: 6px;"
												v-if="index == 2 || index == 3">11日至20日
											</view>
											<view class="title" style="margin-top: 6px;"
												v-if="index == 4 || index == 5">21日至月底
											</view>
										</view>

									</view>
								</view>
								<view class="tel" :style="index%2 == 0 ? 'color:#f9a832':'color:#427705'">
									<view style="width: 160rpx;font-size: 17px;">￥{{item.money | moneyFormat}}
									</view>
								</view>
								<view style="margin-top: -4px;margin-left: 46px;">
									<image style="width: 10px;height: 13px;"
										:src=" typeStatus == true&&indexs==index 
										? 'https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage/down.png' 
										: 'https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage/right.png'"
										mode=""></image>
								</view>
							</view>
						</view>
					</view>
					<view v-if="typeStatus&&index==indexs">
						<view class="drop_down">
							<view style="text-align: center;color:#999" v-if="collectData.length == 0">
								暂无{{index%2 == 0? '收入':'支出'}}记录</view>
							<view v-for="(item,index) in collectData">
								<view class="mingxi">
									<view style="display: flex;">
										<span style="padding-right: 11px;font-size: 16px;">
											{{item.book_create_time.substr(0,10).substr(8,10)}}日
										</span>
										<view style="margin-top: 2px;font-size: 12px">
											<span style="color: #999999;">{{item.book_subject_name}}</span>
										</view>
									</view>

									<view :style="item.book_in_out == 1 ? 'color: #f9a832;':'color:#427705' "
										style="font-size: 16px;">
										{{item.book_money | moneyFormat}} <span
											style="color:#000;margin-left:3px">元</span>
									</view>
								</view>
								<view style="border-bottom: 0.5px solid #eeeeee;"></view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 本年度 -->
		<view v-if="buttonClick == 3" class="repair-box u-p-l-30 u-p-r-30">
			<view class="header-form ">
				<view class="header-li" style="justify-content: space-between;">
					<view class="header-name">
						<h4>选择时间：</h4>
					</view>
					<picker :value="indexeThree" @change="typeBtnThree" :range="typaBtneThree" range-key="name"
						mode="selector">
						<view class="form-select">{{typaBtneThree[indexeThree].name}}</view>
					</picker>
				</view>
			</view>
			<view style="text-align: center;font-weight: 600;font-size: 22px;padding-top: 10px;">
				<image src="https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage/xq.png" style="width: 20px;height: 20px;margin-right: 10px;vertical-align: -2px;"></image>
				{{homelist.proName}}
			</view>
			<!-- 公告收益 -->
			<view @click="moneyShow = true" v-if="isActive == 1"
				style="text-align: center;font-size: 15px;color: #007aff;margin-top: 10px;border-bottom: 1px solid #ddd;">
				截止目前该小区公共收益
				<view style="color: #000;margin-top: 2px;padding-bottom: 7px;">
					余额 <span
						:style="propertyFee.profitInfo.totalBalance >0 ? 'color:#F9A832;font-size:20px;padding:0 5px' : propertyFee.profitInfo.totalBalance < 0 ? 'color:red;font-size:20px' : ''">{{propertyFee.profitInfo.totalBalance|moneyFormat}}</span>
					元
				</view>
			</view>
			<!-- 代收代付 -->
			<view @click="moneyShowto = true" v-if="isActive == 2"
				style="text-align: center;font-size: 15px;color: #007aff;margin-top: 10px;border-bottom: 1px solid #ddd;">
				截止目前该小区代收代付
				<view style="color: #000;margin-top: 2px;padding-bottom: 28px;">
					余额 <span
						:style="propertyFee.withholdInfo.totalBalance >0 ? 'color:#F9A832;font-size:20px;padding:0 5px' : propertyFee.withholdInfo.totalBalance < 0 ? 'color:red;font-size:20px' : ''">{{propertyFee.withholdInfo.totalBalance|moneyFormat}}</span>
					元
				</view>
			</view>
			<view v-if="isActive == 0 && isShowThree" style="padding-bottom: 10px;">
				<view class="u-m-t-20 u-p-30 year">
					<view class="display" style="margin-bottom: 10px;">
						<view style="color: #999999;margin-top:5px">
							<image src="https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage/ysje.png" style="width: 20px;height: 20px"></image>
							应收金额</view>
						<view style="font-size: 20px;">
							{{propertyFee && propertyFee.result.annualReceivables | moneyFormat}}元
						</view>
					</view>
					<view class="display">
						<view style="color: #999999;margin-top:5px">
							<image src="https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage/ysjezb.png" style="width: 20px;height: 20px"></image>
							已收金额（所占%）</view>
						<view style="font-size: 20px;">
							{{propertyFee && propertyFee.result.percentage}}
						</view>
					</view>
				</view>
				<view class="u-m-t-20 u-p-30 year">
					<view class="display" style="margin-bottom: 10px;">
						<view style="color: #999999;margin-top:5px">
							<image src="https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage/yshs.png" style="width: 20px;height: 20px"></image>
							应收户数</view>
						<view style="font-size: 20px;=">
							{{ propertyFee && propertyFee.households.annualReceivables|moneyFormat}}户
						</view>
					</view>
					<view class="display">
						<view style="color: #999999;">
							<image src="https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage/yshszb.png" style="width: 20px;height: 20px"></image>
							已收户数（所占%）</view>
						<view style="font-size: 20px;">
							{{propertyFee && propertyFee.households.percentage }}
						</view>
					</view>
				</view>

				<view class="u-m-t-20 u-p-30 year" style="margin-bottom: 10px;">
					<view class="display" style="margin-bottom: 10px;">
						<view style="color: #999999;margin-top:5px">
							<image src="https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage/zcje.png" style="width: 20px;height: 20px"></image>
							支出金额</view>
						<view style="font-size: 20px;color:#46D345;">
							{{propertyFee && propertyFee.expended | moneyFormat}} <span style="color: #000;">元</span>
						</view>
					</view>
					<view class="display">
						<view style="color: #999999;">
							<image src="https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage/ye.png" style="width: 20px;height: 20px"></image>
							余额（已收-支出）</view>
						<view style="font-size: 20px;color:#F9A832;">
							{{propertyFee && propertyFee.balance | moneyFormat}} <span style="color: #000;">元</span>
						</view>
					</view>
				</view>
			</view>
			<view v-if="isActive == 1 && isShowThree">

				<view style="display: flex;text-align: center;justify-content: center;">
					<view class="u-m-t-20 u-p-40 u-p-l-66 u-p-r-30">
						<text style="color: #999999;">应收金额</text><br>
						<view style="width: 100%;margin-top: 6px;">
							<text
								style="font-size: 20px;color: #F9A832;">{{ propertyFee && propertyFee.received|moneyFormat}}元</text>
						</view>
					</view>
					<view class="u-m-t-20 u-p-40 u-p-l-66 u-p-r-30">
						<text style="color: #999999;">支出金额</text><br>
						<view style="width: 100%;margin-top: 6px;">
							<text
								style="font-size: 20px;color: rgb(146 216 65);">{{propertyFee && propertyFee.expended|moneyFormat}}元</text>
						</view>
					</view>
				</view>
			</view>
			<view v-if="isActive == 2 && isShowThree">
				<view style="display: flex;text-align: center;justify-content: center;margin-top: -12px">
					<view class="u-m-t-40 u-p-40 u-p-l-80 u-p-r-30 u-m-b-20" style="margin-left: -34px;">
						<text style="color: #999999;">应收金额</text><br>
						<view style="width: 100%;margin-top: 6px;">
							<text
								style="font-size: 20px;color: #F9A832;">{{propertyFee && propertyFee.received|moneyFormat}}元</text>
						</view>
					</view>
					<view class="u-m-t-40 u-p-40 u-p-l-80 u-p-r-30 u-m-b-20">
						<text style="color: #999999;">已支金额</text><br>
						<view style="width: 100%;margin-top: 6px;">
							<text
								style="font-size: 20px;color: rgb(146 216 65);">{{propertyFee && propertyFee.expended|moneyFormat}}元</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="modal" v-if="moneyShow">
			<view class="modal-cont">
				<view class="imageBack"></view>
				<view>
					<view style="position: absolute;top: 21px;left: 64px;font-size: 18px; font-weight: 600;">
						<view>公共收益资金储存状况</view>
					</view>
					<view class="wyfBalance">
						<view style="padding: 10px 20px;">
							<view style="color: #fff;text-align: center;">截止目前该小区公共收益</view>
							<view style="padding-top: 10px;color: #fff;text-align: center">余额
								<view
									style="color: #fff;font-size: 20px;margin-top: 6px;font-weight: 500;color: orange;">
									{{propertyFee.profitInfo.totalBalance |moneyFormat}}<span
										style="font-size: 13px;margin-left: 3px;color: #fff;">元</span>
								</view>
							</view>
						</view>
						<view style="margin-top: -67px;text-align: right;">
							<image style="width: 70px;height: 70px;" src="https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage/wyf.png" mode="">
							</image>
						</view>
					</view>
				</view>

				<view class="image_Tow">
					<view style="padding: 40px 16px 0px 20px;">
						<view style="display: flex;">
							<image style="width: 40px;height: 40px;" src="https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage/public.png" mode="">
							</image>
							<view style="color: #999;margin-left: 12px;">
								对公账户<view style="font-size: 18px;color: #000000;font-weight: 550;">
									{{propertyFee.profitInfo.publicBalance|moneyFormat}}<span
										style="font-size: 13px;margin-left: 3px;">元</span>
								</view>
							</view>
						</view>
						<view style="margin-top: 3px;color: #999;">
							<span>说明：扫码(对公账户)/支票/对公账户</span>
						</view>
						<view style="display: flex;margin-top: 20px;">
							<image style="width: 40px;height: 40px;" src="https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage/cash.png" mode="">
							</image>
							<view style="color: #999;margin-left: 12px;">
								对私账户<view style="font-size: 18px;color: #000000;font-weight: 550;">
									{{propertyFee.profitInfo.cashBalance|moneyFormat}}<span
										style="font-size: 13px;margin-left: 3px;">元</span>
								</view>
							</view>
						</view>
						<view style="margin-top: 3px;color: #999;">
							<span>说明：扫码(对私账户)/现金/银行卡/对私账户</span>
						</view>
					</view>
				</view>

				<view class="modal-bottom">
					<view class="meeting-btn" @click="moneyShow = false">关闭</view>
				</view>
			</view>
		</view>

		<view class="modal" v-if="moneyShowto">
			<view class="modal-cont">
				<view class="imageBack"></view>
				<view>
					<view style="position: absolute;top: 21px;left: 64px;font-size: 18px; font-weight: 600;">
						<view>代收代付资金储存状况</view>
					</view>
					<view class="wyfBalance">
						<view style="padding: 10px 20px;">
							<view style="color: #fff;text-align: center;">截止目前该小区代收代付</view>
							<view style="padding-top: 10px;color: #fff;text-align: center">余额
								<view
									style="color: #fff;font-size: 20px;margin-top: 6px;font-weight: 500;color: orange;">
									{{propertyFee.withholdInfo.totalBalance|moneyFormat }}<span
										style="font-size: 13px;margin-left: 3px;color: #fff;">元</span>
								</view>
							</view>
						</view>
						<view style="margin-top: -67px;text-align: right;">
							<image style="width: 70px;height: 70px;" src="https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage/wyf.png" mode="">
							</image>
						</view>
					</view>
				</view>

				<view class="image_Tow">
					<view style="padding: 40px 20px 0px 20px;">
						<view style="display: flex;">
							<image style="width: 40px;height: 40px;" src="https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage/public.png" mode="">
							</image>
							<view style="color: #999;margin-left: 12px;">
								对公账户<view style="font-size: 18px;color: #000000;font-weight: 550;">
									{{propertyFee.withholdInfo.publicBalance|moneyFormat}}<span
										style="font-size: 13px;margin-left: 3px;">元</span>
								</view>
							</view>
						</view>
						<view style="margin-top: 3px;color: #999;">
							<span>说明：扫码(对公账户)/支票/对公账户</span>
						</view>
						<view style="display: flex;margin-top: 20px;">
							<image style="width: 40px;height: 40px;" src="https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage/cash.png" mode="">
							</image>
							<view style="color: #999;margin-left: 12px;">
								对私账户<view style="font-size: 18px;color: #000000;font-weight: 550;">
									{{propertyFee.withholdInfo.cashBalance|moneyFormat}}<span
										style="font-size: 13px;margin-left: 3px;">元</span>
								</view>
							</view>
						</view>
						<view style="margin-top: 3px;color: #999;">
							<span>说明：扫码(对私账户)/现金/银行卡/对私账户</span>
						</view>
					</view>
				</view>

				<view class="modal-bottom">
					<view class="meeting-btn" @click="moneyShowto = false">关闭</view>
				</view>
			</view>
		</view>

	</view>

</template>

<script>
	export default {
		data() {
			return {
				homelist: {},
				buttonClick: 1,
				buttonDay: 0,
				isActive: 0,
				inday: 0,
				navList: [{
					index: 0,
					title: '物业费'
				}, {
					index: 1,
					title: "公共收益"
				}, {
					index: 2,
					title: "代收代付"
				}],
				incomeList: [{
						book_subject: 1,
						type: '物业费'
					},
					{
						book_subject: 2,
						type: '维修费'
					},
					{
						book_subject: 3,
						type: '公共收益'
					},
					{
						book_subject: 4,
						type: '代扣代缴'
					},
					{
						book_subject: 5,
						type: '押金'
					},
					{
						book_subject: 6,
						type: '工资'
					},
					{
						book_subject: 7,
						type: '社保'
					},
					{
						book_subject: 8,
						type: '个税'
					},
					{
						book_subject: 9,
						type: '采购'
					},
					{
						book_subject: 10,
						type: '设备维保费'
					},
					{
						book_subject: 11,
						type: '设备维修费'
					},
					{
						book_subject: 12,
						type: '工程材料费'
					},
					{
						book_subject: 13,
						type: '其他'
					},
					{
						book_subject: 20,
						type: '社保'
					},
					{
						book_subject: 21,
						type: '公积金'
					},
					{
						book_subject: 22,
						type: '个税'
					},
				],
				pageIndex: 1,
				loading: false,
				// type: 1,
				nextPage: false,
				listData: [],
				propertyFee: {
					result: {
						annualReceivables: 0,
						percentage: 0,
					},
					households: {
						annualReceivables: 0,
						percentage: 0,
					},
					profitInfo: {
						totalBalance: 0,
						cashBalance: 0,
						publicBalance: 0,
					},
					withholdInfo: {
						publicBalance: 0,
						cashBalance: 0,
						totalBalance: 0,
					},
					expended: 0,
					balance: 0,
					received: 0,
					finance: false,
				}, //今日  物业费

				//列表查询
				financeListFeeone: [], //物业费
				//天展示
				indexe: 1,
				typaBtne: [{
						value: 0,
						name: '前一天'
					},
					{
						value: 1,
						name: '今日'
					}
				],
				//月显示
				indexeTow: 1,
				typaBtneTow: [{
						value: 0,
						name: '上月',
					},
					{
						value: 1,
						name: '本月'
					}
				],
				//年度展示
				indexeThree: 1,
				typaBtneThree: [{
						value: 0,
						name: '上年度',
					},
					{
						value: 1,
						name: '本年度'
					}
				],
				detailData: [],
				moneyShow: false,
				moneyShowto: false,
				collectData: [],
				typeStatus: false,
				indexs: -1,
				isShowThree: false,
			}
		},
		async onShow() {
			let _this = this
			if (uni.getStorageSync('phone')) {
				if (uni.getStorageSync('loginFlag')) {
					if (!uni.getStorageSync('hourseList')) {
						uni.showModal({
							title: '请先进行业主认证',
							showCancel: false,
							confirmText: '确认',
							confirmColor: '#F9A832',
							success: function(res) {
								if (res.confirm) {
									_this.$Router.push({
										path: '/my/address/address'
									})
								}
							}
						});
						this.$openInvite()
					} else {
						_this.showFlag = true
						_this.homelist = uni.getStorageSync('hourseList')[uni.getStorageSync('hourseNum') || 0]
						_this.name = _this.homelist.proName;
						_this.address = _this.homelist.buildDistrictCode + '-' + _this.homelist.buildTowerCode + '-' +
							_this.homelist.roomUnitNumber + '-' + _this.homelist.roomCode
						setTimeout(function() {
							_this.getfinanceData();
						}, 500);
					}
				} else {
					uni.showModal({
						title: '请先实名认证',
						showCancel: false,
						confirmText: '确认',
						confirmColor: '#F9A832',
						success: function(res) {
							if (res.confirm) {
								_this.$Router.push({
									path: '/homePage1/realName/realName'
								})
							}
						}
					});
				}
			} else {
				uni.showModal({
					title: '请先登录',
					showCancel: false,
					confirmText: '确认',
					confirmColor: '#F9A832',
					success: function(res) {
						if (res.confirm) {
							console.log('a')
							_this.$Router.pushTab({
								path: '/pages/user/user'
							})
						}
					}
				});
			}
		},
		onLoad() {
			this.getNavigation()
		},
		filters: {
			//取截单元,单位  zwl 2022-11-1
			moneyFormat: function(num) {
				if (num == null || num == '') {
					return 0
				}
				let arg = parseInt(num)
				if (arg.toString().length >= 13) {
					// return arg/1000000000000+"万亿"
					const moneys = arg / 1000000000000
					const realVal = parseFloat(moneys).toFixed(2);
					return realVal + "万亿"

				} else if (arg.toString().length >= 9) {
					const moneys = arg / 100000000
					const realVal = parseFloat(moneys).toFixed(2);
					return realVal + "亿"
				} else if (arg.toString().length >= 5) {
					const moneys = arg / 10000
					const realVal = parseFloat(moneys).toFixed(2);
					return realVal + "万"
				} else {
					return num
				}
			}
		},
		methods: {
			//2023-08-26 获取财务公示导航栏 zwl
			getNavigation() {
				this.$request.api.getNavigation({
					pro_id: uni.getStorageSync('projectItem').proId,
				}).then(res => {
					if (res.data.data.datalist.length == 2) {
						this.isActive = 1
					}
					this.navList = []
					this.navList = res.data.data.datalist
				})
			},

			//点击查看本月收入，支出详情
			handleIncome(val, index) {
				if (this.indexs == index && this.typeStatus) {
					this.typeStatus = false;
					return;
				}
				uni.showLoading({
					title: "拼命加载中..."
				})
				this.$request.api.getfinance({
					pro_id: uni.getStorageSync('projectItem').proId,
					selectType: this.isActive, //物业费、公共收益、代收代付
					timeType: this.indexeTow == 1 ? '0' : '-1',
					monthType: index == 0 || index == 1 ? 1 : index == 2 || index == 3 ? 2 : 3,
					book_in_out: index % 2 == 0 ? 1 : 2,
					pageIndex: this.pageIndex,
				}).then(res => {
					this.collectData = res.data.data.datalist
					uni.hideLoading();
					this.typeStatus = true
					this.indexs = index
				})
			},
			//物业费今日
			async getfinanceData() {
				if (this.pageIndex < 2) {
					uni.showLoading({
						title: '计算量较大,正在拼命加载中...'
					});
				}
				this.loading = false;
				let res = this.$request.api.financeData({
					dateType: this.buttonClick, //今日   本月  本年度
					pro_id: this.homelist.proId,
					selectType: this.isActive, //物业费  公共收益
					timeType: this.buttonClick == 1 ? this.indexe - 1 : this.buttonClick == 2 ? this
						.indexeTow - 1 : this.buttonClick == 3 ? this.indexeThree - 1 : null
				}).then(res => {
					if (res.data.code == 0) {
						if (this.pageIndex == 1) {
							this.propertyFee = res.data.data || [];
							this.detailData = res.data.data.datalist || [];
							this.detailData.map(item => {

								if (item.book_types) {
									item.book_types = item.book_types.split('/')
									item.book_types = item.book_types.filter(i => {
										return i != ''
									})
									console.log(item.book_types)
								}

							})
							this.detailData.filter(item => {
								this.incomeList.find(item1 => {
									if (item.book_subject == item1.book_subject) {
										item.types = item1.type
									}
								})
							})
						} else {
							this.propertyFee = [...this.propertyFee, ...res.data.data];
							this.detailData = [...this.detailData, ...res.data.data.datalist];
						}
						if (this.buttonClick == 3) {
							this.isShowThree = true;
						} else {
							this.isShowThree = false;
						}
						this.nextPage = res.data.data.isEndPage
						this.loading = true;
						uni.hideLoading();
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}
				})
				uni.stopPullDownRefresh()
			},
			checked(index) {
				this.isActive = index
				console.log(this.isActive)
				this.getfinanceData();

			},
			//点击物业费今日、本月、今年
			handlerClickState(state) {
				if (state === 1) {
					this.buttonClick = 1;
					this.getfinanceData();
				} else if (state === 2) {
					this.buttonClick = 2;
					this.getfinanceData()
				} else {
					this.buttonClick = 3;
					this.getfinanceData();
				}
			},
			//跳转缴费公示
			getJump() {
				uni.navigateTo({
					url: '/homePage/finance/paypublicity'
				})
			},
			//获取日展示
			typeBtn: function(e) {
				this.indexe = e.target.value
				this.getfinanceData()
			},
			//获取月展示
			typeBtnTow: function(e) {
				this.indexeTow = e.target.value
				this.getfinanceData()
			},
			//获取年展示
			typeBtnThree: function(e) {
				this.indexeThree = e.target.value
				this.getfinanceData()
			},
		}
	}
</script>


<style lang="scss" scoped>
	.year{
		
		text-align: center; 
		border: 1px solid #ececec;
		border-radius: 10px;
		>.display{
		  display: flex;
		  justify-content: space-between;
		  image{
			  margin-right:10px;
			  vertical-align: -5px;
		  }
		}
	}
	.repair-wrap {
		width: 100%;
		min-height: 100vh;
		height: auto;
		background: #f4f4f4;
		overflow: hidden;

		.repair-box {
			background: #fff;

			// padding-bottom: 20px;
			.repair-titel {
				height: 44rpx;
				line-height: 44rpx;

				.repair-titel-l {
					float: left;
				}

				.repair-titel-r {
					float: right;
					color: #999;
				}
			}

			.repair-6 {
				color: #666;
			}

			.finance-money {
				text-align: center;
			}
		}
	}

	.tab_nav {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.tab_nav .navTitle {
		height: 70rpx;
		line-height: 70rpx;
		width: 100%;
		text-align: center;
		font-size: 32rpx;
		font-family: Alibaba PuHuiTi;
		color: #333;
	}

	.active {
		position: relative;
		color: #427705;
	}

	.active::after {
		content: "";
		position: absolute;
		width: 100rpx;
		height: 4rpx;
		background-color: #427705;
		left: 0px;
		right: 0px;
		bottom: 0px;
		margin: auto;
	}

	.button {
		width: 26%;
		border-radius: 7px;
		line-height: 26px;
		border: 1px solid #CCCCCC;
		font-size: 14px;
	}

	.header-form {
		background: #FFFFFF;
		margin-top: -10px;
		padding: 0 40rpx;

		.header-li {
			display: flex;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			line-height: 95rpx;
			color: #333333;
			border-bottom: 1rpx solid #EEEEEE;
			.header-name {
				width: 150rpx;
			}
			.text-area {
				width: 420rpx;
				padding-top: 26rpx;
				height: 60rpx;
			}
		}
	}

	.form-select {
		width: 104rpx;
		background: url(https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage/mailXiaLa2.png) no-repeat center right;
		background-size: 18rpx 17rpx;
	}

	.modal {
		position: fixed;
		top: 0%;
		left: 0%;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.8);
		z-index: 10;

	}

	.modal-cont {
		width: 610rpx;
		background: #ffffff;
		box-shadow: 0rpx 6rpx 12rpx 0rpx rgba(0, 0, 0, 0.12);
		border-radius: 24rpx;
		display: flex;
		flex-direction: column;
		position: relative;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		padding-bottom: 24px;
	}

	.modal-bottom {
		width: 100%;
		height: 84rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.imageBack {
		height: 300px;
		background: url(https://clhy-img.oss-cn-beijing.aliyuncs.com/file/2023-03-09/aa09988ddb6a5c95abaee1dfd9a15f4.png) no-repeat;
		margin-top: -199px;
	}

	.wyfBalance {
		border: 1px solid #60B200;
		height: 123px;
		width: 86%;
		margin: 0px auto;
		margin-top: -41px;
		background: linear-gradient(180deg, #76D904 0%, #417505 100%);
		border-radius: 9px;
	}

	.image_Tow {
		width: 266px;
		height: 286px;
		background: url(https://clhy-img.oss-cn-beijing.aliyuncs.com/file/2023-03-09/104b20cbf76c10f2752a9c90f00bd77.png) no-repeat;
		margin: -19px auto;

	}

	.meeting-btn {
		width: 350rpx;
		height: 88rpx;
		line-height: 88rpx;
		background: #FFFFFF;
		border-radius: 22px;
		border: 1px solid #427705;
		text-align: center;
		color: #427705;
		margin: 0 auto;
	}


	.drop_down {
		width: 100%;
		margin: auto;
		padding: 10px 30px 26px;
		background: #fff;
		margin-top: -10px
	}

	.mingxi {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px 0;
	}

	.day_month {
		padding: 2px 11px 10px 20px;
		font-weight: 700;
		font-size: 16px;
	}

	.list {
		.letter-all {
			font-size: 22rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #999999;
			line-height: 32rpx;
			text-align: center;
		}

		.list-cont {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 40rpx;
			padding-top: 20rpx;
			margin-bottom: 10rpx;
			width: 100vw;
			.tel {
				height: 48rpx;
			}

			.time {
				font-size: 22rpx;
				color: #999999;
				display: flex;
				flex-direction: column;
				align-items: flex-end;

				.red {
					width: 28rpx;
					height: 28rpx;
					line-height: 28rpx;
					text-align: center;
					background: #FF3B30;
					border-radius: 100%;
					font-size: 20rpx;
					color: #FFF;
				}
			}
		}

	}

	.list-left {
		display: flex;
		align-items: center;

		.named {
			display: flex;
			font-size: 30rpx;
			font-weight: 700;
			color: #333333;
			line-height: 40rpx;
		}

		.title {
			font-size: 26rpx;
			color: #999999;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		.list-message {
			width: 100rpx;
			height: 100rpx;
			background: #F5A623;
			border-radius: 12rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: center;
			margin-right: 20rpx;

			.addr {
				width: 42rpx;
				height: 58rpx;
			}
		}
	}

	.list-img {
		width: 82rpx;
		height: 82rpx;
		border-radius: 50%;
	}

	.bor_Noneone {
		width: 232px;
		height: 242px;
		margin: 0 auto;

		.bor_Noneimage {
			width: 100%;
			height: 100%;
		}
	}
	.list_box {
		background-color: #fff;
		margin-top: 20rpx;
	}
</style>